{% extends "layout.html" %}
{% load static %}
{% block css_m %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="{% static 'css/jquery-ui.min.css' %}">
    <link type="text/css" rel="stylesheet" href="{% static 'bootstrap_slider/bootstrap-slider.min.css' %}">
    <style>
        img {
            width: 800px;
            height: 600px;
        }

        #lt_slider .slider-selection {
            background: #BABABA;
        }

        .ui-effects-transfer {
            border: 3px solid black
        }

    </style>
{% endblock %}
{% block js_m %}
    <script type="text/javascript" src="{% static 'js/jquery-ui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'bootstrap_slider/bootstrap-slider.min.js' %}"></script>
{% endblock %}

{% block content_body %}

    <div class="container-fluid" style="">

        <div class="center-block panel-body">
            <h3 style="text-align: center">{{ result.pid.name }}<small>{{ result.pid.get_sex_display }} {{ result.pid.age }}岁
                检查时间：{{ result.test_date }} </small></h3>
            <a href="#" id="video_capture"><img style="width: 800px; height: 600px" src="/video_cap/50/30.html"
                                                class="center-block" alt="龚庭鼻炎馆鼻道镜检查"
                                                id="video"></a>

        </div>
        <fieldset>
        <div class="center-block row" style="width: 800px;background-color: lightgray;border-radius: 5px">

            <div class="col-md-6">
                <b><span class="glyphicon glyphicon-certificate" aria-hidden="true"></span> 亮度：0</b> <input id="lt_slider" data-slider-id='ex1Slider' type="text" data-slider-min="0"
                                   data-slider-max="100"
                                   data-slider-step="1" data-slider-value="50"/><b>100</b>
            </div>

            <div class="col-md-6" style="text-align:right">
                <b><span class="glyphicon glyphicon-adjust" aria-hidden="true"></span> 色彩：0</b><input id="st_slider" data-slider-id='ex1Slider' type="text" data-slider-min="0"
                                  data-slider-max="100"
                                  data-slider-step="1" data-slider-value="30"/><b>100</b>
            </div>
        </div>
        <div class="panel-body center-block" style="width: 800px">

            <form method="post" novalidate action="{% url 'test_report' %}">
                {% csrf_token %}


                <div class="hidden">
                    <input type="text" name="image_paths" id="image_paths"/>
                    <input type="text" name="test_id" id="test_id" value="{{ result.test_id }}"/>
                </div>

                <div class="row center-block">

                    <a class="btn btn-danger btn-block btn-lg" href="#" id="img_cap_a"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> 截图</a>

                    <div class="row center-block" style="margin-top: 5px">

                        <button style="width:385px" type="submit" class="btn btn-primary" id="sbm" disabled="disabled">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 写报告
                        </button>

                        <a style="width: 380px" class="btn btn-default"
                           href="/release_cap/{{ result.pid.pid }}.html/"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> 取
                            消</a>

                    </div>
                </div>

            </form>

        </div>
        </fieldset>
        <div class="row center-block panel-body" id="img_div">


        </div>
    </div>





{% endblock %}

{% block content_bottom %}
    <div class="modal fade " id="add-modal_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" style="z-index: 10000">
        <div class="modal-dialog modal-lg" style="width: 1000px">
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title" id="myModalLabel">
                        查看图片
                    </h4>
                </div>
                <div class="modal-body">
                    <img id="show_image" src="" style="width: 800px; height: 600px"/>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="m_close">关闭
                    </button>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script>
        var ltSlider = $("#lt_slider").bootstrapSlider({});
        var stSlider = $("#st_slider").bootstrapSlider({});
        function effectTransfer() {
            var options = {to: "#img_div", className: "ui-effects-transfer"};
            $("#video").effect("transfer", options, 500, callback);
        }


        // 回调函数
        function callback() {
            setTimeout(function () {
                $("#video").removeAttr("style").hide().fadeIn();
            }, 200);
        }

        function imaCap() {

            $("#sbm").removeAttr("disabled")
            $.ajaxSetup({

                data: {csrfmiddlewaretoken: '{{ csrf_token }}'},

            });
            $.ajax({
                    url: '{% url "image_cap" %}',
                    type: 'POST',
                    data: {
                        "test_id": "{{result.test_id}}",
                        "lt": ltSlider.bootstrapSlider('getValue'),
                        "st": stSlider.bootstrapSlider('getValue'),

                    },

                    dataType: 'JSON',
                    success: function (arg) {
                        var im_path = arg["im_path"]
                        $("#image_paths").val($("#image_paths").val() + arg["im_path"] + " ")

                        var im_html = '<div class="col-xs-6 col-md-2" ><img src="/image/' + im_path + '" alt="截图" data-holder-rendered="true" style="height: 100%; width: 100%; display: block;" class="modal_image"></div>'
                        $("#img_div").append(im_html)
                        $('.modal_image').click(function () {

                            $('#add-modal_id').modal('show');

                            var path_ = $(this).attr('src');

                            $('#show_image').attr('src', path_);


                        });


                        $("#m_close").click(function () {

                            $('#add-modal_id').modal('hide');
                        });

                    }

                }
            );
        }

        $(document).keyup(function (event) {
            if (event.keyCode === 32) {
                effectTransfer()
                imaCap();
            }else if(event.keyCode === 13){
                $("#sbm").trigger('click')
            };
            return false;
        });
        $(function () {

            $("#lt_slider").bootstrapSlider().on('change', function () {
                var ltDegree = ltSlider.bootstrapSlider('getValue')
                var oldSt = $("#video").attr("src").match(/(\d+).html/)[1]
                $("#video").attr("src", "/video_cap/" + ltDegree + "/" + oldSt + ".html/")

            });
            $("#st_slider").bootstrapSlider().on('change', function () {
                var stDegree = stSlider.bootstrapSlider('getValue')
                var oldlt = $("#video").attr("src").match(/\d+/)
                $("#video").attr("src", "/video_cap/" + oldlt + "/" + stDegree + ".html/")

            });


            $("#img_cap_a").on("click", function () {
                effectTransfer()
                imaCap()
            });
            // $("#video_capture").on("click", function () {
            //     if($("#video").attr("src")==='/bgimage/cam.jpg'){
            //         $("#video").attr("src", "/video_cap/50/30.html")
            //         $("fieldset").removeAttr("disabled")
            //     }else{
            //     effectTransfer()
            //     imaCap()
            //     }
            // })
            $("#video_capture").on("click", function () {
                
                effectTransfer()
                imaCap()
                
            })

        })
    </script>
{% endblock %}